<template>
  <div class="home">
    <header class="header">
      <!-- 头部 -->
      <HeaderLayer></HeaderLayer>
    </header>
    <section class="main-layer">
      <section class="left-layer">
        <!-- menu -->
        <MenuLayer></MenuLayer>
      </section>
      <section class="right-layer">
        <!-- 主体内容 -->
        <PageNavLayer :pageNav="pageNav">
          <!-- 子组件调用时，组件名称之间的内容，传个default的slot. -->
          <div class="nav-page-style bg-green"></div>
          <!-- 也可以个指定的插槽传内容，这叫具名插槽 -->
          <!-- <template v-slot:right>
            <h3>这是一个标题</h3>
          </template> -->

          <!--作用域插槽：使用子组件自己的数据，在父组件调用子组件时，把数据绑定好，在传给子组件的插槽。
             使用slotProps俩接收指定插槽上面绑定的props.
          slotProps: { "mytitle": "权限管理", "html": "我的页面" }
          -->
          <template v-slot:right="slotProps">
            <h3>{{ slotProps.mytitle }}</h3>
            <p>{{ slotProps.html }}</p>
          </template>
        </PageNavLayer>
        <AccessLayer></AccessLayer>
      </section>
    </section>
  </div>
</template>

<script>
import HeaderLayer from "../components/HeaderLayer.vue";
import MenuLayer from "../components/MenuLayer.vue";
import PageNavLayer from "../components/PageNavLayer.vue";
import AccessLayer from "../components/AccessLayer.vue";

export default {
  name: "HomeView",
  data() {
    return {
      pageNav: [
        { navName: "首页", url: "/home" },
        { navName: "权限", url: "" },
      ],
    };
  },
  components: { HeaderLayer, MenuLayer, PageNavLayer, AccessLayer },
};
</script>
